<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./assets/bootstrap-4.6.2/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./assets/webui-popover-1.2.17/jquery.webui-popover.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/option.css" />
    <title>baicizhan-helper</title>
</head>

<body>
    <ul class="nav nav-pills justify-content-center" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="wordbookTab" data-toggle="tab" data-target="#wordbookTabContent"
                type="button" role="tab" aria-controls="wordbookTabContent" aria-selected="true">单词本</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="settingTab" data-toggle="tab" data-target="#settingTabContent" type="button"
                role="tab" aria-controls="settingTabContent" aria-selected="true">系统设置</button>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="https://gitee.com/mamotz/baicizhan-helper/wikis/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C" target="_blank">使用手册</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="http://110.42.229.221:8080/comments" target="_blank" title="反馈使用中遇见的问题">问题反馈</a>
        </li>
        <li class="nav-item dropdown">
            <a id="username" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                aria-expanded="false">guest</a>
            <div class="dropdown-menu">
                <a id="exit" class="dropdown-item" href="#">退出</a>
            </div>
        </li>
        <li class="nav-item" role="presentation">        
            <a href="https://github.com/marmot-z/baicizhan-helper" target="_blank" title="项目首页">
                <img style="width: 40px;" src="./assets/images/github-mark.png"/>
            </a>
        </li>        
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="wordbookTabContent" role="tabpanel" aria-labelledby="wordbookTab">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 offset-sm-2">
                        <div class="row" style="margin: 20px 0;">
                            <select id="wordbookSelect" class="form-control col-sm-5" tabIndex="-1">
                            </select>
                            <button id="wordbookRefreshButton" type="button" class="btn btn-primary"
                                style="margin-left: 10px;" data-toggle="tooltip" title="刷新单词本显示最新内容" tabIndex="-1">
                                <img style="width: 20px;" src="./assets/images/svgs/refresh.svg" />
                            </button>
                            <div class="col-sm-4 offset-sm-2">
                                <input id="maskEnglishButton" type="checkbox" tabIndex="-1">
                                <label class="form-check-label" for="maskEnglishButton">
                                    隐藏英文
                                </label>
                                <input id="maskMeanButton" type="checkbox" tabIndex="-1" checked>
                                <label class="form-check-label" for="maskMeanButton">
                                    隐藏释义
                                </label>                                
                            </div>                          
                        </div>

                        <div id="orderBtns" style="margin-bottom: 5px;">
                            <button id="collectTimeDescOrderBtn" data-order="collectTimeDescOrder" type="button" class="btn btn-outline-primary" tabIndex="-1">时间倒序</button>
                            <button id="collectTimeAscOrderBtn" data-order="collectTimeAscOrder" type="button" class="btn btn-outline-secondary" tabIndex="-1">时间顺序</button>
                            <button id="firstLettersAscOrderBtn" data-order="firstLettersAscOrder" type="button" class="btn btn-outline-secondary" tabIndex="-1">首字母顺序</button>
                            <button id="firstLettersDescOrderBtn" data-order="firstLettersDescOrder" type="button" class="btn btn-outline-secondary" tabIndex="-1">首字母倒序</button>
                        </div>

                        <table id="wordbookContentTable" class="table table-hover">
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="settingTabContent" role="tabpanel" aria-labelledby="settingTab">
            <div class="container" style="margin-top: 40px;">
                <form id="settingForm" class="col-sm-8 offset-sm-2">
                    <div class="form-group row align-items-center">
                        <label for="collectWordbookSelect" class="col-sm-3 col-form-label">单词本</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="collectWordbookSelect"></select>                            
                            <small class="form-text text-muted">
                                选中单词本用于后续单词收藏
                            </small>
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label class="col-sm-3 col-form-label">弹窗样式</label>
                        <div class="col-sm-9">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="popoverStyle"
                                    id="simleStyleRadio" value="simple" checked>
                                <label class="form-check-label" for="simleStyle">精简模式</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="popoverStyle" id="richStyleRadio"
                                    value="rich">
                                <label class="form-check-label" for="richStyle">图文模式</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">翻译时机</label>
                        <div class="col-sm-9">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="triggerMode" id="showIconRadio"
                                    value="showIcon" checked>
                                <label class="form-check-label" for="showIconRadio">显示图标，点击翻译</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="triggerMode" id="directRadio"
                                    value="direct">
                                <label class="form-check-label" for="directRadio">直接翻译</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="triggerMode" id="neverRadio"
                                    value="never">
                                <label class="form-check-label" for="neverRadio">永不翻译</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">单词详情内容</label>
                        <div class="col-sm-9">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showVariantCheck">
                                <label class="form-check-label" for="showVariantCheck">
                                    单词变形
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showSentenceCheck" checked disabled>
                                <label class="form-check-label" for="showSentenceCheck">
                                    图文例句
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showShortPhrasesCheck">
                                <label class="form-check-label" for="showShortPhrasesCheck">
                                    短语
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showSynonymsCheck">
                                <label class="form-check-label" for="showSynonymsCheck">
                                    近义词
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showAntonymsCheck">
                                <label class="form-check-label" for="showAntonymsCheck">
                                    反义词
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showSimilarWordsCheck">
                                <label class="form-check-label" for="showSimilarWordsCheck">
                                    形近词
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="showEnglishParaphraseCheck">
                                <label class="form-check-label" for="showEnglishParaphraseCheck">
                                    英文释义
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" style="display: none;">
                        <label class="col-sm-3 col-form-label">代理服务器</label>
                        <div class="col-sm-9 row">
                            <div class="col-sm-8">
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">http://</div>
                                    </div>
                                    <input id="hostInput" type="text" class="form-control" value="110.42.229.221"
                                        placeholder="默认不需要修改" />
                                </div>
                            </div>
                            :
                            <div class="col-sm-3">
                                <input id="portInput" type="text" class="form-control mb-2" value="80"
                                    placeholder="默认不需要修改">
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">背单词</label>
                        <div class="col-sm-9">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="enableStudyInput">
                                <label class="custom-control-label" for="enableStudyInput">开启背单词</label>
                            </div>
                            <div id="studyBookDiv" class="card mb-3 text-center" style="display: none; max-width: 540px;">
                                <div class="row no-gutters">
                                    <div class="col-md-4">
                                        <img src="" class="card-img" alt="...">
                                    </div>
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <h5 class="card-title"></h5>
                                            <p class="card-text"></p>
                                            <p class="card-text"><small class="text-muted"></small></p>
                                            <a href="./study.html" target="_blank" class="btn btn-primary">去背单词</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">快捷键</label>
                        <div class="col-sm-9">
                            <input id="collectShortcutKeyInput" class="form-control" type="text" placeholder="点击录入收藏单词快捷键" readonly>
                            <small class="form-text text-muted">
                                不要设置成系统快捷键（如：ctrl+c），如果快捷键不生效再换个试试
                            </small>
                            <br>
                            <p>其他通用快捷键：</p>
                            <kbd>Tab</kbd> 切换单词
                            <kbd>Enter</kbd> 选中单词
                            <kbd>Esc</kbd> 退出单词详情                                                     
                        </div>
                    </div>
                    <div id="versionTips" class="form-group row" style="display: none;">
                        <div class="alert alert-warning" style="width: 100%;" role="alert">
                            有新的版本插件发布了（当前版本：<strong></strong>），请进行更新！
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>                        
                    </div>
                    <div class="form-group row">
                        <div style="margin: 0 auto">
                            <button id="resetButton" type="button" class="btn btn-warning">重置</button>
                            &nbsp;&nbsp;
                            <button id="submitButton" type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModel" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModelLabel">短信登录</h5>
                </div>
                <div class="modal-body">
                    <form id="phoneLoginForm" style="display: block;">
                        <div class="form-group row">
                            <label for="phoneNumInput" class="col-sm-3 col-form-label">手机号码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="phoneNumInput">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="verifyCodeInput" class="col-sm-3 col-form-label">验证码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="verifyCodeInput">
                            </div>
                        </div>
                    </form>

                    <form id="emailLoginForm" style="display: none;">
                        <div class="form-group row">
                            <label for="emailInput" class="col-sm-3 col-form-label">邮箱地址：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="emailInput">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="passwordInput" class="col-sm-3 col-form-label">密码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="passwordInput">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a id="wechatLoginLink" title="微信登录" href="#">微信</a>
                    <a id="qqLoginLink" title="QQ登录" href="#">QQ</a>
                    <a id="phoneLoginLink" title="短信登录" href="#">短信</a>
                    <a id="emailLoginLink" title="邮箱登录" href="#">邮箱</a>
                    <button id="sendVerifyButton" type="button" class="btn btn-secondary">发送验证码</button>
                    <button id="loginButton" type="button" class="btn btn-primary">登录</button>
                </div>
            </div>
        </div>
    </div>

    <div id="wordDetailModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">单词详情</h5>
                </div>
                <div class="modal-body" style="padding-top: 0;">
                </div>
            </div>
        </div>
    </div>

    <div class="qr-code">
        <img id="qrCodeImg" src="assets/images/qrcode-icon.jpeg"/>
        <small class="text-muted" style="font-size: small;">
            您的加入就是我继续开发的动力
        </small>
    </div>

    <script type="text/javascript" src="./assets/jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./assets/bootstrap-4.6.2/js/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="./assets/webui-popover-1.2.17/jquery.webui-popover.js"></script>
    <script type="text/javascript" src="./js/base-stemmer.js"></script>
    <script type="text/javascript" src="./js/english-stemmer.js"></script>
    <script type="text/javascript" src="./js/event.js"></script>
    <script type="text/javascript" src="./js/util.js"></script>
    <script type="text/javascript" src="./js/storage.js"></script>
    <script type="text/javascript" src="./js/wordbook-storage.js"></script>
    <script type="text/javascript" src="./js/api.js"></script>
    <script type="text/javascript" src="./js/login.js"></script>
    <script type="text/javascript" src="./js/setting.js"></script>
    <script type="text/javascript" src="./js/word-detail.js"></script>
    <script type="text/javascript" src="./js/wordbook.js"></script>
    <script type="text/javascript" src="js/study/study-setting.js"></script>
    <script type="text/javascript" src="./js/options.js"></script>
</body>

</html>